<template>
    <div class="box">
        <el-button-group>
            <el-button :type="active=='list' ? 'primary': ''" @click="active='list'">链接列表</el-button>
            <el-button :type="active=='add' ? 'primary': ''" @click="active='add'">添加链接</el-button>
        </el-button-group>
        <el-card shadow="always" :body-style="{ padding: '20px' }" v-if="active=='list'">
            <el-tabs v-model="activeName">
                <el-tab-pane label="文字链接" name="first">
                    <el-table :data="fontlinkList" border stripe>
                        <el-table-column type="index" label="序号"></el-table-column>
                        <el-table-column prop="id" label="ID"></el-table-column>
                        <el-table-column prop="title" label="链接标题"></el-table-column>
                        <el-table-column prop="des" label="链接描述"></el-table-column>
                        <el-table-column prop="url" label="链接地址"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                    type="primary"
                                    icon="el-icon-edit"
                                    circle
                                    @click="edit(scope.row)"
                                ></el-button>
                                <el-button
                                    type="danger"
                                    icon="el-icon-delete"
                                    circle
                                    @click="del(scope.row.id)"
                                ></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页器 -->
                    <el-pagination
                        layout="total, sizes, prev, pager, next"
                        :total="fonttotal"
                        :page-sizes="[10,20,30]"
                        @current-change="fontpageChange"
                        @size-change="fontsizeChange"
                    ></el-pagination>
                </el-tab-pane>
                <el-tab-pane label="图片链接" name="second">
                    <el-table :data="imglinkList" border stripe>
                        <el-table-column type="index" label="序号"></el-table-column>
                        <el-table-column prop="id" label="ID"></el-table-column>
                        <el-table-column label="链接照片"></el-table-column>
                        <el-table-column prop="des" label="链接描述"></el-table-column>
                        <el-table-column prop="url" label="链接地址"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                    type="primary"
                                    icon="el-icon-edit"
                                    circle
                                    @click="edit(scope.row)"
                                ></el-button>
                                <el-button
                                    type="danger"
                                    icon="el-icon-delete"
                                    circle
                                    @click="del(scope.row.id)"
                                ></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页器 -->
                    <el-pagination
                        layout="total, sizes, prev, pager, next"
                        :total="imgtotal"
                        :page-sizes="[10,20,30]"
                        @current-change="imgpageChange"
                        @size-change="imgsizeChange"
                    ></el-pagination>
                </el-tab-pane>
            </el-tabs>
            <!-- 修改的弹框 -->
            <el-dialog title="修改链接信息" :visible.sync="dialogShow" width="30%">
                <el-form :model="editForm" label-width="80px" :inline="false" size="normal">
                    <el-form-item label="链接标题">
                        <el-input v-model="editForm.title"></el-input>
                    </el-form-item>
                    <el-form-item label="链接描述">
                        <el-input v-model="editForm.des"></el-input>
                    </el-form-item>
                    <el-form-item label="链接地址">
                        <el-input v-model="editForm.url"></el-input>
                    </el-form-item>
                </el-form>

                <span slot="footer">
                    <el-button @click=" dialogShow= false">取消</el-button>
                    <el-button type="primary" @click="editSubmit">确定</el-button>
                </span>
            </el-dialog>
        </el-card>
        <el-card shadow="always" :body-style="{ padding: '20px' }" v-else>
            <el-row :gutter="20">
                <el-col :span="12" :offset="5">
                    <el-form :model="addForm" label-width="80px" :inline="false" size="normal">
                        <el-form-item label="链接类型">
                            <el-select v-model="addForm.type" placeholder="请选择" @change="checked">
                                <el-option label="文字链接" value="1"></el-option>
                                <el-option label="图片链接" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="链接标题" size="normal" v-if="state==1">
                            <el-input v-model="addForm.title" placeholder="请输入链接标题" size="normal"></el-input>
                        </el-form-item>
                        <el-form-item label="链接描述" size="normal">
                            <el-input v-model="addForm.des" placeholder="请输入链接描述" size="normal"></el-input>
                        </el-form-item>
                        <el-form-item label="链接地址" size="normal">
                            <el-input v-model="addForm.url" placeholder="请输入链接地址" size="normal"></el-input>
                        </el-form-item>
                        <el-form-item label="链接图片" size="normal" v-if="state==2">
                            <el-upload
                                class="upload-demo"
                                action="api/upload"
                                :on-success="HandleSuccess"
                                list-type="picture"
                                name="img"
                            >
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="addSubmit">立即创建</el-button>
                            <el-button>取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>
<script>
let defaultAddForm = {
    type: "",
    act: "add",
    url: "",
    title: "",
    des: "",
    img: "",
};
export default {
    data() {
        return {
            active: "list",
            activeName: "first",
            fontlinkList: [],
            imglinkList: [],
            fonttotal: 0,
            fontlinkObj: {
                act: "getlist",
                type: 1,
                start: 1,
                pagesize: 10,
            },
            imgtotal: 0,
            imglinkObj: {
                act: "getlist",
                type: 2,
                start: 1,
                pagesize: 10,
            },
            dialogShow: false,
            editForm: {},
            addForm: {
                ...defaultAddForm,
            },
            state: 0, // 0表示文字链接，1表示图片链接
        };
    },
    methods: {
        // 页码发生变化
        fontpageChange(val) {
            this.fontlinkObj.start = val;
            this.getfontLinkList();
        },
        // 每页数量变化
        fontsizeChange(val) {
            this.fontlinkObj.start = 1;
            this.fontlinkObj.pagesize = val;
            this.getfontLinkList();
        },
        // 页码发生变化
        imgpageChange(val) {
            this.imglinkObj.start = val;
            this.getimgLinkList();
        },
        // 每页数量变化
        imgsizeChange(val) {
            this.imglinkObj.start = 1;
            this.imglinkObj.pagesize = val;
            this.getimgLinkList();
        },
        async getfontLinkList() {
            let { data: res } = await this.$axios.get("api/link", {
                params: this.fontlinkObj,
            });
            if (res.code !== 200) return this.$message.error(res.msg);
            this.fontlinkList = res.data;
            this.fonttotal = res.allNum;
        },
        async getimgLinkList() {
            let { data: res } = await this.$axios.get("api/link", {
                params: this.imglinkObj,
            });
            if (res.code !== 200) return this.$message.error(res.msg);
            this.imglinkList = res.data;
            this.imgtotal = res.allNum;
        },
        // 删除事件
        async del(id) {
            try {
                await this.$confirm("您确定要删除此链接吗?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                });
                let { data: res } = await this.$axios.get("api/link", {
                    params: {
                        id: id,
                        act: "del",
                    },
                });

                if (res.code !== 200) return this.$message.error(res.msg);
                if (this.linkObj.start !== 1 && this.fontlinkList.length == 1) {
                    this.linkObj.start--;
                }
                this.getfontLinkList();
            } catch (error) {
                this.$message.error("取消删除");
            }
        },
        // 点击修改事件
        edit(row) {
            console.log(row);
            this.editForm = {
                ...row,
            };
            this.dialogShow = true;
        },
        // 修改提交事件
        async editSubmit() {
            this.editForm = Object.assign(
                { act: "edit", type: 1 },
                this.editForm
            );
            let { data: res } = await this.$axios.post(
                "api/link",
                this.editForm
            );
            if (res.code !== 200) return this.$message.error(res.msg);
            this.$message.success("修改成功");
            this.getfontLinkList();
            this.dialogShow = false;
        },
        // 选择事件
        checked() {
            console.log(this.addForm.type);
            if (this.addForm.type == 1) {
                this.state = 1;
            } else if (this.addForm.type == 2) {
                this.state = 2;
            } else {
                this.state = 0;
            }
        },
        HandleSuccess(file) {
            this.addForm.img = file.data[0].path;
        },
        // 添加提交事件
        async addSubmit() {
            let { data: res } = await this.$axios.post(
                "api/link",
                this.addForm
            );
            if (res.code !== 200) return this.$message.error(res.msg);
            this.$message.success("添加成功");
            this.addForm = {
                ...defaultAddForm,
            };
            this.active = "list";
            this.getfontLinkList();
        },
    },
    created() {
        this.getfontLinkList();
        this.getimgLinkList();
    },
};
</script>
<style scoped>
.box {
    text-align: left;
}
.el-card {
    margin-top: 20px;
}
</style>
